<template>
  <div style="color: #333333">
    <!--头部logo-->
    <title1></title1>

    <!--头部面包屑-->
    <div class="breadCrumbBox flexCenter">
      <div style="width: 1200px;height: 100%;" class="flexAlignCenter">
        <a-breadcrumb separator=">">
          <a-breadcrumb-item href="javascript:void(0)" v-if="homeFlag">
            <router-link :to="home">首页</router-link>
          </a-breadcrumb-item>
          <a-breadcrumb-item href>通知公告</a-breadcrumb-item>
        </a-breadcrumb>
      </div>
    </div>

    <!--列表搜索框-->
    <div class="searchInputBox flexCenter">
      <div style="width: 1200px">
        <a-input-search placeholder="请输入标题名称" enter-button />
      </div>
    </div>

    <!--列表-->
    <div style="width: 100%;" class="flexCenter">
      <div class="listBox">
        <div
          class="flexBetween"
          v-for="(item,index) in sourceData"
          :key="index"
          style="padding: 20px 0;border-bottom: 1px solid #F3F3F3"
        >
          <div class="titleBox">
            <span
              class="bg"
              style="width: 7px;height: 7px;border: 1px solid #348bda;display: inline-block;border-radius: 100%;margin-right: 10px;"
            ></span>
            <span
              class="changeColorClass"
              style="font-size: 16px;color: #484848;"
              @click="showDetail"
            >{{item.title}}</span>
          </div>
          <div>
            <span style="font-size: 16px;color: #484848;">{{item.time}}</span>
          </div>
        </div>
      </div>
    </div>

    <!--分页-->
    <div style="width: 100%;margin-bottom: 140px;" class="flexCenter">
      <div class="paginationBox flexAlignCenter flexBetween">
        <span>共2条数据</span>
        <a-pagination :current="current" :total="2" @change="onChange" />
      </div>
    </div>
    <div style="position:fixed;bottom:0;width: 100%;">
      <supportCompany></supportCompany>
    </div>
  </div>
</template>

<script>
import title1 from '@/views/title/index.vue'
import supportCompany from '@/views/supportCompany/index.vue'

export default {
  components: {
    title1,
    supportCompany
  },
  data() {
    return {
      home: '/gateway',
      homeFlag: sessionStorage.getItem('homeFlag'),
      current: 1,
      sourceData: [
        {
          title: '《保障农民工工资支付条例》5月1日正式实施',
          time: '2020-05-06'
        }
        // {
        //   title: '国务院关于印发个人所得税专项附加扣除暂行办法的通知（国发[2018]41号）',
        //   time: '2019-03-26'
        // },
        // {
        //   title: '《江苏交通工程建设局之歌》歌词征求意见',
        //   time: '2019-03-07'
        // },
        // {
        //   title: '江苏事业单位工作人员年度考核登记表（2017年度）',
        //   time: '2018-01-02'
        // },
        // {
        //   title: '【19大精神百问第四期】为什么说五百年来的变革是开创性的',
        //   time: '2017-11-09'
        // },
        // {
        //   title: '【19大精神百问第五期】为什么说五百年来的变革是深层次的',
        //   time: '2017-11-09'
        // },
        // {
        //   title: '公告审批（朱辰2017-10-16 10:34）-海启高速公路预制箱通预制完成',
        //   time: '2017-10-16'
        // },
        // {
        //   title: '“寻找最美劳动者”征图（文）活动',
        //   time: '2017-09-18'
        // },
        // {
        //   title: '新时期“交建局精神”表述语及其释义',
        //   time: '2017-09-05'
        // },
        // {
        //   title: '港珠澳大桥专题片',
        //   time: '2017-09-04'
        // }
      ]
    }
  },
  methods: {
    onChange(current) {
      this.current = current
    },
    showDetail() {
      this.$router.push({ path: '/detail' })
    }
  }
}
</script>

<style scoped>
div,
p,
span {
  font-family: 'Microsoft YaHei', 'San-serif', 'Microsoft JhengHei', 'STXihei';
}
.breadCrumbBox {
  width: 100%;
  height: 40px;
  background-color: rgba(246, 248, 249, 1);
  position: fixed;
  top: 100px;
  z-index: 100;
}
::v-deep .ant-breadcrumb > span:last-child a {
  color: rgba(20, 146, 255, 1);
}
::v-deep .ant-input {
  border-radius: 0;
}
.listBox {
  margin-top: 27px;
  width: 1200px;
}
.searchInputBox {
  width: 100%;
  margin-top: 30px;
}
.paginationBox {
  width: 1200px;
  height: 48px;
  background-color: rgba(246, 246, 246, 1);
  /*margin-left: 310px;*/
  padding: 0 20px 0 28px;
}
.titleBox:hover {
  color: #348bda;
  cursor: pointer;
}
.titleBox:hover .bg {
  background-color: #348bda;
}
.changeColorClass:hover {
  color: #348bda !important;
}
</style>
